import { useRef } from "react";

export default function TaskSearch({ keyword, onSearch }) {
  const ref = useRef();

  const handleSearch = () => {
    // 处理一些非空校验之后，再调用父组件传递过来的 onSearch

    // 1. 获取输入框的 value 值
    const value = ref.current.value.trim();
    // // 2. 判断是否为空
    // if (!value) return;
    // 3. 调用父组件传递过来的 onSearch 方法
    onSearch(value);
  };

  return (
    <div>
      <input
        ref={ref}
        type="text"
        placeholder="请输入关键字"
        defaultValue={keyword}
      />
      <button onClick={handleSearch}>搜索</button>
    </div>
  );
}
